<template>
  <!-- 灾情勘察   审核 列表 -->
  <div class="EmergencyList">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/StatisticsPageMap' }">灾情勘察</el-breadcrumb-item>
        <el-breadcrumb-item>队伍选择</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyList-center">
      <div class="EmergencyList-sstj">
        <div class="EmergencyList-sstj-icon"></div>
        <div class="EmergencyList-sstj-titel">筛选条件</div>
      </div>
      <div class="EmergencyList-form">
        <el-form :inline="true" :model="formInline" size="small">
          <el-form-item label="所属单位：" label-width="150px">
            <el-select v-model="formInline.xqlb" placeholder="请选择" clearable>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="队伍专业：" label-width="150px">
            <el-select v-model="formInline.xxly" placeholder="请选择" clearable>
              <el-option label="应急供电" value="shanghai"></el-option>
              <el-option label="综合救援" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="QueryAndReset_btn">
            <el-button type="primary" @click="onSubmit(formInline)" size="small">查询</el-button>
            <el-button @click="resetForm(formInline)" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="EmergencyList-table">
        <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="tableData" height="80%" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" size="small">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="ssdw" label="所属单位" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="dwmc" label="队伍名称" align="center">
          </el-table-column>
          <el-table-column prop="dwlx" label="队伍类型" align="center">
          </el-table-column>
          <el-table-column prop="dwzy" label="队伍专业" align="center">
          </el-table-column>
          <el-table-column prop="dwzt" label="队伍状态" align="center">
          </el-table-column>
          <el-table-column prop="dzmc" label="队长名称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="lxfs" label="联系方式" align="center">
          </el-table-column>
          <el-table-column label="待命人数" align="center">
            <template slot-scope="scope">
              <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                {{ scope.row.dmrs }}
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <div style="margin-top: 10px,float: right" class="EmergencyList-table-pag flexBetween">
          <div class="fontSize14">共一条数据，共1页</div>
          <el-pagination background layout="prev, pager, next" :total="10">
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确定</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      </div>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog title="勘察任务" :visible.sync="dialogFormVisible" width="60%">
      <el-form :model="form" disabled size="mini">
        <!-- 筛选框 -->
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <div slot="title" class="flex">
              <div class="leftLine"></div>
              <div class="fontSize16">信息来源</div>
            </div>
            <div class="EmergencyList-dialog-form-item ">
              <el-form-item label="响应命令单：" label-width="180px" prop="name" class="sjgy">
                <el-select v-model="form.region" placeholder="请选择响应命令单" style="width: 90%;">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <div style="padding: 0 30px;">
              <el-row>
                <el-col :span="12"><div class="grid-content bg-purple-dark">事件类别：暴雨</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-dark">事件级别：较大</div></el-col>
              </el-row>
              <el-row style="margin: 20px 0;">
                <el-col :span="12"><div class="grid-content bg-purple-dark">影响范围：随州柳林镇</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-dark">发生时间：2021-08-12 08:00:00</div></el-col>
              </el-row>
              <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">事件概要：随州市随南地区突发持续性暴雨天气，柳林镇24小时雨量（503毫米）、12小时雨量（300毫米）、1小时雨量均创有记录
                以来的最大降雨量。</div></el-col>
              </el-row>
            </div> -->
          </el-collapse-item>

          <el-collapse-item name="2">
            <div slot="title" class="flex">
              <div class="leftLine"></div>
              <div class="fontSize16">任务信息</div>
            </div>
            <div>
              <el-form disabled :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
                <div>
                  <el-form-item label="任务类型：" prop="region" label-width="140px">
                    <el-select v-model="ruleForm.region" placeholder="请选择">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="任务地点：" prop="region" label-width="140px">
                    <el-select v-model="ruleForm.region" placeholder="请选择">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="责任单位/部门：" prop="region" label-width="140px">
                    <el-select v-model="ruleForm.region" placeholder="请选择">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="责任人：" prop="region" label-width="140px">
                    <el-select v-model="ruleForm.region" placeholder="请选择">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </div>

                <div>
                  <el-form-item label="计划完成时间：" prop="date1111" label-width="140px">
                    <el-date-picker v-model="jhwcTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="任务内容：" prop="desc" label-width="140px">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                  </el-form-item>
                </div>

              </el-form>

            </div>
            <!--  -->
            <div style="height: 10px;"></div>
            <!--  -->
            <div><span style="color: #D9001B;margin-right:2px;">*</span>队伍信息：</div>
            <el-table :data="tabsData" border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" style="width: 100%">
              <el-table-column type="index" label="序号" align="center" width="60">
              </el-table-column>
              <el-table-column label="队伍名称" prop="dwmc" min-width="300" align="center">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.dwmc" placeholder="请输入" @change="handleCellEdit(scope.$index, scope.row)"> </el-input>
                </template>
              </el-table-column>

              <el-table-column label="队长名称" prop="dzmc" min-width="100" align="center">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.dzmc" placeholder="请输入" @change="handleCellEdit(scope.$index, scope.row)"> </el-input>
                </template>
              </el-table-column>
              <el-table-column label="联系电话" prop="lxfs" min-width="200" align="center">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.lxdh" placeholder="请输入" @change="handleCellEdit(scope.$index, scope.row)"> </el-input>
                </template>
              </el-table-column>
              <el-table-column label="队伍人数" prop="dwrs" min-width="100" align="center">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.dwrs" placeholder="请输入" @change="handleCellEdit(scope.$index, scope.row)"> </el-input>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="addRow(tabsData)" type="text" size="mini" icon="el-icon-plus" v-if="scope.$index===tabsData.length-1"></el-button>
                  <el-button @click="deleteRow(scope.$index, tabsData)" type="text" size="mini" icon="el-icon-minus" v-if="tableDataTabs.length > 1"></el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- </div> -->
          </el-collapse-item>
          <!-- 信息下发 -->
          <el-collapse-item name="3">
            <div slot="title" class="flex">
              <div class="leftLine"></div>
              <div class="fontSize16">填报信息</div>
            </div>
            <!-- 内容区域 -->
            <div class="information_Sources_content">
              <div class="task_distribution">
                <div>填报人：刘俊</div>
                <div>单位及部门：国网湖北省电力有限公司安监部</div>
                <div>填报时间：2021-08-12 09:31:21</div>
              </div>
            </div>

          </el-collapse-item>
          <el-collapse-item name="3">
            <div slot="title" class="flex">
              <div class="leftLine"></div>
              <div class="fontSize16">审批信息</div>
            </div>
            <!-- 内容区域 -->
            <div class="information_Sources_content">
              <!-- <el-row :gutter="20" type="flex" align="middle">
              <el-col :span="24">
                <el-form-item label="审批意见：" label-width="98px">
                  <el-input :disabled="false" type="input" placeholder="请输入内容" resize="none" v-model="formInline.name">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="98px" class="demo-ruleForm">
                <el-form-item label="审批意见：" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-form>
              <div class="task_distribution">
                <div>审批人：张衡</div>
                <div>单位及部门：国网湖北省电力有限公司安监部</div>
                <div>填报时间：2021-08-12 10:11:00</div>
              </div>
            </div>

          </el-collapse-item>
        </el-collapse>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">同意</el-button>
        <el-button size="mini">驳回</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BackboneTeamList",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      activeNames: ["1", "2", "3", "4"],
      btnData: [
        {
          btn: "全部",
          id: 0
        },
        {
          btn: "设备部",
          id: 1
        },
        {
          btn: "配电部",
          id: 2
        },
        {
          btn: "营销部",
          id: 3
        }
      ],
      btnNum: 0,
      form: {
        name: "",
        region: ""
      },
      jhwcTime: "", // 计划完成时间
      formInline: {
        date1: "",
        xqlb: "",
        yjjb: "",
        xxly: "",
        yxfw: ""
      },
      tableData: [
        {
          ssdw: "国网武汉供电公司",
          dwmc: "应急救援基干分队",
          dwlx: "应急救援",
          dwzy: "应急供电",
          dwzt: "待命",
          dzmc: "张五甲",
          lxfs: "18536325896",
          dmrs: 30
        },
        {
          ssdw: "国网湖北省电力有限公司",
          dwmc: "应急救援基干分队",
          dwlx: "应急救援",
          dwzy: "综合救援",
          dwzt: "待命",
          dzmc: "张五甲",
          lxfs: "18536325896",
          dmrs: 60

        },
        {
          ssdw: "国网武汉供电公司",
          dwmc: "应急救援基干分队",
          dwlx: "应急救援",
          dwzy: "应急供电",
          dwzt: "待命",
          dzmc: "张五甲",
          lxfs: "18536325896",
          dmrs: 50
        },
        {
          ssdw: "国网武汉供电公司",
          dwmc: "应急救援基干分队",
          dwlx: "应急救援",
          dwzy: "应急供电",
          dwzt: "待命",
          dzmc: "张五甲",
          lxfs: "18536325896",
          dmrs: 32
        }
      ],
      tabsData: [
        {
          dwmc: "", // 队伍名称
          dzmc: "", // 队长名称
          lxdh: "", // 联系电话
          dwrs: "" // 队伍人数
        }
      ],
      rules: {
        name: [
          { required: true, message: "请选择应急事件/响应命令", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1111: [
          { type: "date", required: true, message: "请选择日期", trigger: "change" }
        ],
        date2: [
          { type: "date", required: true, message: "请选择时间", trigger: "change" }
        ],
        type: [
          { type: "array", required: true, message: "请至少选择一个活动性质", trigger: "change" }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [
          { required: true, message: "请填写任务内容", trigger: "blur" }
        ]
      },
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ]

    };
  },
  methods: {
    // 新增
    dialogVisible(i) {
      this.btnNum = i.id;
      this.dialogFormVisible = true;
    },
    // 编辑
    handleEdit() {
      this.dialogFormVisible = true;
    },
    handleSelectionChange() {

    },
    deleteRow(index, rows) {
      if (index < 1) {
        return;
      }
      rows.splice(index, 1);
    },
    addRow(tabsData) {
      tabsData.push({
        name: "", province: ""
      });
    },
    //  提交 / 保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }



  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/DisasterInformation.less";
@import "../../../assets/style/pop-upNotification.less";

.task_distribution {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px 20px 30px;
}
.demo-form-inline {
  > div {
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
    :deep(.el-form-item) {
      flex: 1;
    }
  }
}
</style>
